import "./Layout.css";
import "../../fonts/iconfont.css";
import React, { useCallback, useEffect, useState } from "react";
import { Avatar, Menu, Popconfirm } from "antd";
import {
  AppstoreOutlined,
  MailOutlined,
  SettingOutlined,
  SnippetsOutlined,
} from "@ant-design/icons";
import Breadcrumbs from "../../Components/Breadcrumbs";
import Cookie from "../../Api/cookie";
import { request } from "../../Api/api";
const Layout = ({ children }) => {
  useEffect(() => {
    async function fetchData() {
      const res = await request(
        "/login/checkRight",
        { url: window.location.pathname },
        "GET"
      );
      if (res.code >= 0) {
      } else {
        window.location.href = "/Error/noRight";
      }
    }
    fetchData();
  }, []);
  const [icons] = useState([
    <AppstoreOutlined />,
    <MailOutlined />,
    <SettingOutlined />,
    <SnippetsOutlined />,
  ]);
  const [keys, setKeys] = useState([]);
  const [items, setItems] = useState([]);
  const [openKeys, setOpenKeys] = useState([]);
  const toItem = useCallback((data) => {
    if (data == null || data.length === 0) {
      return undefined;
    }
    return data.map((d) => {
      return {
        label: d.name,
        key: d.url,
        children: d.children ? toItem(d.children) : undefined,
      };
    });
  }, []);
  const getAllKeys = useCallback((data) => {
    var keys = [];
    data.forEach((item) => {
      if (item.url) {
        keys.push(item.url);
      }
      if (item.children) {
        keys = [...keys, ...getAllKeys(item.children)];
      }
    });
    return keys;
  }, []);
  useEffect(() => {
    async function fetchData() {
      const res = await request(
        "/user/getMenu",
        { id: Cookie.get("uid") },
        "GET"
      );
      if (res.code >= 0) {
        setItems(
          toItem(res.data).map((item, i) => {
            return { ...item, icon: icons[i] };
          })
        );
        setKeys(getAllKeys(res.data));
      }
    }
    fetchData();
  }, [icons, toItem, getAllKeys]);
  const to = ({ key }) => {
    window.location.href = key;
  };
  const onOpenChange = (openKeys) => {
    setOpenKeys(openKeys);
  };
  return (
    <div className="main-container">
      <div className="header-container">
        <div className="logo">
          <img className="logo-img" src="/favicon.ico" alt="logo" />
        </div>
        <div className="user-info">
          <div className="avatar">
            <Avatar
              style={{
                backgroundColor: "#f56a00",
                verticalAlign: "middle",
              }}
              size={50}
              gap={4}
            >
              {"张三"}
            </Avatar>
          </div>
        </div>
        <div className="operation">
          <Popconfirm
            title="确认退出吗？"
            onConfirm={() => {
              Cookie.remove("token");
              window.location.href = "/login";
            }}
            okText="确认"
            cancelText="取消"
          >
            <div className="operation-item">
              <i className="iconfont icon-tuichu"></i>退出
            </div>
          </Popconfirm>
        </div>
      </div>
      <div className="body-container">
        <div className="left">
          <Menu
            mode="inline"
            openKeys={openKeys}
            onOpenChange={onOpenChange}
            items={items}
            onClick={to}
          />
        </div>
        <div className="right">
          <div className="bread-box">
            <Breadcrumbs />
          </div>
          <div className="show-content">{children}</div>
        </div>
      </div>
      <div className="footer-container"></div>
    </div>
  );
};

export default Layout;
